<!--河长名录页面-->
<style lang="less" scoped>
.dire {
  .ivu-tabs {
    min-height: 300px;
  }
  .smallForm {
    width: 250px;
    display: inline-block;
    margin-left: 1%;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
}
</style>

<template>
  <div class="total">
    <Modal v-model="direModal"
           :mask-closable="false"
           width="800">
      <div class="white"
           slot="header">{{updateTitle}}</div>
      <Form :model="modelItem"
            :label-width="80"
            :rules="rules">
        <div>
          <p class="white">市级河长</p>
          <Table :data="cityChief"
                 :columns="areaColumns" 
                 no-data-text="暂无数据" 
                 stripe></Table>
        </div>
        <div>
          <p class="white">区级河长</p>
          <Table :data="areaChief"
                 :columns="areaColumns"  
                 no-data-text="暂无数据" 
                 stripe></Table>
        </div>
        <div>
          <p class="white">镇级河长</p>
          <Table :data="townChief"
                 :columns="areaColumns"  
                 no-data-text="暂无数据" 
                 stripe></Table>
        </div>
        <div>
          <p class="white">村级河长</p>
          <Table :data="villageChief"
                 :columns="areaColumns"  
                 no-data-text="暂无数据" 
                 stripe></Table>
        </div>
        <!-- 不显示，先注释以防需要恢复，如后期不需要再删除2021-01-21 -->
        <!-- <div>
          <p class="white">河长助理</p>
          <Table :data="chiefAssistant"
                 :columns="areaColumns"  
                 no-data-text="暂无数据" 
                 stripe></Table>
        </div> -->
        <Form-item label="河长部门"
                   prop="deps"
                   style="margin-top: 10px">
          <Cascader :data="areaArr1"
                    :render-format="formatLabel"
                    placeholder="请选择部门"
                    v-model="modelItem.deps"
                    @on-change="changeDep"></Cascader>
        </Form-item>
        <Form-item label="河长名称"
                   prop="chref_name">
          <Select ref="select"
                  placement="bottom"
                  filterable
                  clearable
                  @on-change="changeChref">
            <OptionGroup :label="v.rolename"
                         :key="v.rolename"
                         v-for="v in receiveData">
              <Option v-for="item in v.users"
                      :value="item.username+':'+v._id"
                      :key="item.username">{{ item.realname }}</Option>
            </OptionGroup>
          </Select>
        </Form-item>
        <Form-item label="河长等级"
                   prop="level">
          <Select v-model="modelItem.level"
                  placement="bottom"
                  transfer
                  clearable
                  :disabled="isChrefLevel">
            <Option v-for="item in levelArr"
                    :value="item.value"
                    :key="item.title">{{ item.title }}</Option>
          </Select>
        </Form-item>
        <Form-item label="调入备注"
                   prop="note">
          <input placeholder="请输入内容"
                 v-model="addContent"
                 class="ivu-input ivu-input-default">
        </Form-item>
        <Button type="info"
                @click="addNewDire">新增河长</Button>

      </Form>
      <div slot="footer">
        <Button @click="direModal = false">取消</Button>
      </div>
    </Modal>
    <Modal v-model="transferModal"
           width="800">
      <div class="white"
           slot="header">{{transferTitle}}</div>
      <Input v-model="transferContent"
             type="textarea"
             :rows="15"
             placeholder="请输入内容" />
      <div slot="footer">
        <Button @click="confirmTransfer">确定</Button>
      </div>
    </Modal>
  </div>

</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
export default {
  data() {
    return {
      urlAddressList: '/law/city/getTree',
      urlTreeList: '/sys/department/getTree',
      urlRiverFind: '/bsi/riverchief/find',
      urlUserList: '/sys/userinfo/findbyrole',
      urlAddChief: '/bsi/riverchief/addchief',
      urlDelChief: '/bsi/riverchief/delchief',
      receiveData: [],
      rules: {
        deps: [
          {
            required: true,
            type: 'array',
            message: '请选择部门',
            trigger: 'change',
          },
        ],
        chref_name: [
          { required: true, message: '请选择河长名', trigger: 'change' },
        ],
        level: [
          {
            required: true,
            type: 'string',
            message: '请选择河长等级',
            trigger: 'change',
          },
        ],
        note: [
          {
            required: true,
            type: 'string',
            message: '请输入备注',
            trigger: 'change',
          },
        ],
      },
      searchItem: {
        name: '',
      },
      type_save: '湖泊水库',
      area: [],
      levelArr: [
        {
          title: '市级河长',
          value: '3',
        },
        {
          title: '区级河长',
          value: '2',
        },
        {
          title: '镇级河长',
          value: '1',
        },
        {
          title: '村级河长',
          value: '0',
        },
        // {
        //   title: '河长助理',
        //   value: 6,
        // },
      ],
      Page: {
        current: 1,
        pageSize: 14,
        total: 0,
      },
      cityChief: [],
      chiefAssistant: [],
      areaArr1: [],
      type: '',
      updateTitle: '',
      transferTitle: '河长调出备注',
      direModal: false,
      transferModal: false,
      transferContent: '',
      transferIndex: 0,
      transefRow: null,
      addContent: '',
      btnChange: false,
      btnSave: false,
      modelItem: {
        deps: [],
        chref_name: '',
        level: '',
      },
      areaColumns: [
        {
          title: '河长名称',
          key: 'realname',
        },
        {
          title: '职位',
          key: 'position',
        },
        {
          title: '河长等级',
          key: 'level',
        },
        {
          title: '操作',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.remove(params.index, params.row);
                    },
                  },
                },
                '删除'
              ),
            ]);
          },
        },
      ],
      areaChief: [],
      townChief: [],
      villageChief: [],
      savePost: [],
      index: '',
      saveRow: {},
      isChrefLevel: false // 是否有河长等级
    };
  },
  methods: {
    getAddress1() {
      let params = {
        data: {},
        url: this.urlTreeList,
        token: storage.session.get('token'),
        success: res => {
          this.areaArr1 = res.data.result;
        },
      };
      ajaxPost(params);
    },
    getReceive(dep) {
      let params = {
        data: {
          dep_name: dep,
          type: '2',
        },
        url: this.urlUserList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.receiveData = res.data.result;
        },
      };
      ajaxPost(params);
    },
    edit(row) {
      this.modelItem = {
        deps: [],
        chref_name: '',
        level: '',
      };
      this.$refs.select.query = '';
      this.saveRow = row;
      this.btnChange = true;
      this.updateTitle = '编辑河长名录';
      this.direModal = true;
      this.villageChief = [];
      this.townChief = [];
      this.areaChief = [];
      let params = {
        data: {
          river_no: row.river_no,
        },
        url: this.urlRiverFind,
        token: storage.session.get('token'),
        success: res => {
          let rows = res.data.result;
          if (rows.village_chiefs) {
            this.villageChief = rows.village_chiefs;
            this.villageChief.map(item => {
              item.level = '村级河长';
            });
          }
          if (rows.area_chiefs) {
            this.areaChief = rows.area_chiefs;
            this.areaChief.map(item => {
              item.level = '区级河长';
            });
          }
          if (rows.town_chiefs) {
            this.townChief = rows.town_chiefs;
            this.townChief.map(item => {
              item.level = '镇级河长';
            });
          }
          if (rows.city_chief) {
            this.cityChief = rows.city_chief;
            this.cityChief.map(item => {
              item.level = '市级河长';
            });
          }
          if (rows.chief_assistant) {
            this.chiefAssistant = rows.chief_assistant;
            this.chiefAssistant.map(item => {
              item.level = '河长助理';
            });
          }
        },
      };
      ajaxPost(params);
      // 获取河长部门列表
      this.getAddress1();
    },

    addNewDire() {
      if (this.modelItem.deps.length === 0) {
        this.$Message.warning({
          content: '请选择部门',
        });
        return;
      }
      if (this.modelItem.chref_name === '') {
        this.$Message.warning({
          content: '请选择河长',
        });
        return;
      }
      if (this.modelItem.level == undefined) {
        this.$Message.warning({
          content: '请选择河长等级',
        });
        return;
      }
      let position = '';
      let realname = '';
      let title = '';
      let params = {
        data: {
          river_no: this.saveRow.river_no,
          username: this.modelItem.chref_name,
          type: this.modelItem.level,
          remark: this.addContent,
        },
        url: this.urlAddChief,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Message.success({
              content: '新增成功',
            });
            this.receiveData.map(item => {
              item.users.map(items => {
                if (items.username == this.modelItem.chref_name) {
                  position = items.position;
                  realname = items.realname;
                }
              });
            });
            this.levelArr.map(item => {
              if (this.modelItem.level === item.value) {
                title = item.title;
              }
            });
            let obj = {
              realname,
              position,
              level: title,
            };
            if (this.modelItem.level == '1') {
              this.townChief.push(obj);
            } else if (this.modelItem.level == '0') {
              this.villageChief.push(obj);
            } else if (this.modelItem.level == '2') {
              this.areaChief.push(obj);
            } else if (this.modelItem.level == '3') {
              this.cityChief.push(obj);
            } else if (this.modelItem.level == '6') {
              this.chiefAssistant.push(obj);
            }
            this.modelItem.chref_name = '';
            this.modelItem.level = '';
            this.modelItem.deps = [];
            this.addContent = '';
            this.direModal = false;
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      
      ajaxPost(params);
    },
    remove(index, row) {
      this.transferIndex = index;
      this.transefRow = row;
      this.transferModal = true;
    },

    confirmTransfer() {
      let row = this.transefRow;
      let index = this.transferIndex;

      let level = '';
      this.levelArr.map(item => {
        if (row.level === item.title) {
          level = item.value;
        }
      });
      let params = {
        data: {
          river_no: this.saveRow.river_no,
          username: row.username,
          remark: this.transferContent,
          type: level,
        },
        url: this.urlDelChief,
        token: storage.session.get('token'),
        success: res => {
          let type = row.level;
          if (res.data.code == '0000') {
            this.$Message.success({
              content: '删除成功',
            });
            if (type == '区级河长') {
              this.areaChief.splice(index, 1);
            } else if (type == '镇级河长') {
              this.townChief.splice(index, 1);
            } else if (type == '村级河长') {
              this.villageChief.splice(index, 1);
            } else if (type == '市级河长') {
              this.cityChief.splice(index, 1);
            } else if (type == '河长助理') {
              this.chiefAssistant.splice(index, 1);
            }
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);

      this.transferContent = '';
      this.transferModal = false;
    },

    // 自定义河长部门级联显示格式
    formatLabel (labels, selectedData) {
      let labelList = selectedData.map(o => o.label); // 当前选择数据label集合
      let text = [...new Set(labelList)].join(' / '); // 去重，使用分隔符连接字符串
      return text;
    },

    // 改变河长部门
    changeDep (data) {
      // 清空河长名称
      this.$refs.select.clearSingleSelect(); 
      this.receiveData = [];
      this.modelItem.chref_name = ''; 
      // 判空，获取河长列表
      data && data.length > 0 && this.getReceive(data[data.length - 1]);
    },

    // 改变河长名称
    changeChref (data) {
      this.modelItem.chref_name = data ? data.split(':')[0] : ''; // 河长名称
      this.modelItem.level = data ? data.split(':')[1] : ''; // 河长等级
      this.isChrefLevel = this.modelItem.level ? true : false; // 河长等级是否为空
    }
  },
  mounted() {
    // this.getAddress1();
  },
  // watch: {
  //   'modelItem.deps'(data) {
  //     let i = data.length - 1;
  //     if (data.length > 0) { // 河长部门不为空才能显示所有河长数据
  //       this.getReceive(data[i]);
  //     }
  //   },
  // },
};
</script>
